import { Card, IndexBar, List, Tag } from 'antd-mobile'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { xuan } from '../../store/city'
import { useNavigate } from 'react-router-dom'

function index() {
  const [list,setList]=useState([])
  const dispatch=useDispatch()
  const nav=useNavigate()
  const godata=async()=>{
      const res=await axios.get('/api/city')
      console.log(res);
      setList(res.data.data)      
  }
  useEffect(()=>{
    godata()
  },[])
  const huan=(city)=>{
    console.log(city)
    dispatch(xuan(city))
    nav(-1)
  }
  return (
    <div>
      <Card title='热门城市'>
        {
          list.hotCities?.map((v,i)=>{
            return  <Tag key={i} onClick={()=>huan(v.name)}>{v.name}</Tag>
          })
        }
      </Card>
      <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {list.cityList?.map(group => {
          const { title, citys } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {citys?.map((item, index) => (
                  <List.Item key={index} onClick={()=>huan(item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  )
}

export default index